
<style type='text/css'>
    #poster {
        width:320px;height:504px;border:1px solid #ccc;position:relative
    }
   #poster .bg { position:absolute;width:100%;z-index:0}
   #poster .drag[type=img] img,#poster .drag[type=thumb] img { width:100%;height:100%; }

   #poster .drag { position: absolute; width:80px;height:80px; border:1px solid #000; }

    
    #poster .drag[type=nickname] { width:80px;height:40px; font-size:16px; font-family: 黑体;}
    #poster .drag img {position:absolute;z-index:0;width:100%; }
    
    #poster .rRightDown,.rLeftDown,.rLeftUp,.rRightUp,.rRight,.rLeft,.rUp,.rDown{
            position:absolute;
            width:7px;
            height:7px;
            z-index:1;
            font-size:0;
    }    
 

       #poster .rRightDown,.rLeftDown,.rLeftUp,.rRightUp,.rRight,.rLeft,.rUp,.rDown{
              background:#C00;
       }

    .rLeftDown,.rRightUp{cursor:ne-resize;}
    .rRightDown,.rLeftUp{cursor:nw-resize;}
    .rRight,.rLeft{cursor:e-resize;}
    .rUp,.rDown{cursor:n-resize;}
    .rLeftDown{left:-4px;bottom:-4px;}
    .rRightUp{right:-4px;top:-4px;}
    .rRightDown{right:-4px;bottom:-4px;}
    .rRightDown{background-color:#00F;}   
    .rLeftUp{left:-4px;top:-4px;}
    .rRight{right:-4px;top:50%;margin-top:-4px;}
    .rLeft{left:-4px;top:50%;margin-top:-4px;}
    .rUp{top:-4px;left:50%;margin-left:-4px;}
    .rDown{bottom:-4px;left:50%;margin-left:-4px;}
    .context-menu-layer { z-index:9999;}
    .context-menu-list { z-index:9999;}
#poster .help {
	width: 168px;
    height: 17px;
    right: 0;
    top: 0;
	color:#fff;
	padding-left:3px;
    background: #00c568;
    cursor: pointer;
	position: absolute;
    z-index: 99;
}
</style>
<ul class="nav nav-tabs">
	<li><a href="javascript:;" ng-click="access_json('list')">返回列表</a></li>
</ul>
<div class="col-jy" style="width:100%">
    <div class="col-sm-12">
        <table style='width:100%;'>
            <tr>
                <td style='width:320px;padding:10px;' valign='top'>
                    <div id='poster'> 
						<div class="help">选择元素，点击右键删除元素</div>
                        <img ng-if="pagedata.item.image!=null && pagedata.item.image!=''" ng-src='{{tomedia(pagedata.item.image)}}' class='bg'/>  
						<div  ng-if="pagedata.item.data.data" >
                         <div class="drag" ng-repeat="(key,d) in pagedata.item.data.data"  type="{{d.type}}" index="{{key+1}}" ng-click="pagedata.abc(d.type)" ng-style="{'z-index':key+1,'left':d.left,'top':d.top,'width':d.width,'height':d.height}"  > 
                            <img  ng-if="d.type=='qr'"  src="../addons/jy_poster/resource/images/qr.jpg" />
                            <img ng-if="d.type=='head'"  src="../addons/jy_poster/resource/images/head.jpg" />
							<img ng-if="d.type=='img' || d.type=='thumb'"  src="../addons/jy_poster/resource/images/img.jpg" />
							<img ng-if="d.type=='head'"  src="../addons/jy_poster/resource/images/head.jpg" />
                            <div  ng-if="d.type=='nickname'"  style="font-size:{{d.size}};color:{{d.color}}">昵称</div> 
							<div  ng-if="d.type=='title'"  style="font-size:{{d.size}};color:{{d.color}}">商品名称</div> 
							<div  ng-if="d.type=='marketprice'"  style="font-size:{{d.size}};color:{{d.color}}">商品现价</div> 
							<div  ng-if="d.type=='productprice'"  style="font-size:{{d.size}};color:{{d.color}}">商品原价</div>  
                            <div class="rRightDown"> </div><div class="rLeftDown"> </div><div class="rRightUp"> </div><div class="rLeftUp"> </div><div class="rRight"> </div><div class="rLeft"> </div><div class="rUp"> </div><div class="rDown"></div>
                         </div>
                      
                        </div>
                    </div>
                </td>
                <td valign='top' style='padding:10px;'>
                    <div class='panel panel-default' style="min-height:504px">
                        <div class='panel-body'>
                            <div class="form-group">

									<label class="col-xs-12 col-sm-3 col-md-2 left-label">背景图片</label>
									<div class="col-xs-12 col-sm-8 col-lg-9">
										<div class="input-group">
											<input type="text" ng-model="pagedata.item.image" class="form-control ng-pristine ng-valid ng-touched" autocomplete="off">
											<span class="input-group-btn" ng-show="false==false">
												<button class="btn btn-primary" type="button" ng-click="image(pagedata.item,'image')">选择图片</button>
											</span>
										</div>
										<div class="input-group" style="margin-top:.5em;">
											<img ng-src="{{tomedia(pagedata.item.image) || '../core/resource/images/nopic.jpg'}}" class="img-responsive img-thumbnail" width="150" src="../core/resource/images/nopic.jpg">
										</div>
										<div class="help-block">（背景图片尺寸建议640*1008）</div>		
									</div>
								
							</div>
                            <div class="form-group">
                                <label class="col-xs-12 col-sm-3 col-md-2 left-label">海报元素</label>
                                <div class="col-xs-12 col-sm-8 col-lg-9">
                                    <button class='btn btn-default btn-com' type='button' data-type='head' ng-click="pagedata.set ='head'">头像</button>
                                    <button class='btn btn-default btn-com' type='button' data-type='nickname' ng-click="pagedata.set ='nickname'">昵称</button>
                                    <button class='btn btn-default btn-com' type='button' data-type='qr' ng-click="pagedata.set ='qr'">二维码</button>
									<button class='btn btn-default btn-com' type='button' data-type='img' ng-click="pagedata.set ='img'">图片</button>
									<button class='btn btn-default btn-com' type='button' data-type='title' ng-click="pagedata.set ='title'">商品名称</button>    
                                    <button class='btn btn-default btn-com' type='button' data-type='thumb' ng-click="pagedata.set ='thumb'">商品图片</button>    
                                    <button class='btn btn-default btn-com' type='button' data-type='marketprice' ng-click="pagedata.set ='marketprice'">商品现价</button>    
                                    <button class='btn btn-default btn-com' type='button' data-type='productprice' ng-click="pagedata.set ='productprice'">商品原价</button>
									<div class="help-block">选择不同的元素</div>
                                </div>
                            </div>
							<div class="form-group" ng-if="pagedata.set == 'qr'">
                                    <label class="col-sm-2 control-label">二维码尺寸</label>
                                    <div class="col-sm-4">
                                        <div class='input-group'>
                                            <input type="text" ng-model="pagedata.item.qrsize" class="form-control namesize" placeholder="例如: 150,180"  />
                                            <div class='input-group-addon'>px</div>
                                        </div>
                                    </div>
                            </div>
								<div ng-if="pagedata.set =='nickname'" class="form-group">
									<div class="col-xs-12 col-sm-3 col-md-2 left-label">昵称颜色</div>
									<div class="col-xs-12 col-sm-8 col-lg-9">
										<div class="input-group input-group-sm">
											<input class="form-control input-sm diy-bind color" data-bind-child="style"  ng-model="pagedata.item.namecolor" type="color" />
											<span class="input-group-addon btn btn-info" ng-click="pagedata.item.namecolor=''">清除</span>
										</div>
										<div class="help-block">颜色</div>
									</div>
								</div>
                                <div ng-if="pagedata.set =='nickname'" class="form-group">
                                    <label class="col-xs-12 col-sm-3 col-md-2 left-label">昵称大小</label>
                                    <div class="col-xs-12 col-sm-8 col-lg-9">
                                        <div class='input-group'>
                                            <input type="text" ng-model="pagedata.item.namesize" class="form-control namesize" placeholder="例如: 14,16"  />
                                            <div class='input-group-addon'>px</div>
                                        </div>
										<div class="help-block">只需填数字</div>
                                    </div>
                                </div>
								<div ng-if="pagedata.set =='title'" class="form-group">
									<div class="col-xs-12 col-sm-3 col-md-2 left-label">颜色</div>
									<div class="col-xs-12 col-sm-8 col-lg-9">
										<div class="input-group input-group-sm">
											<input class="form-control input-sm diy-bind color" data-bind-child="style"  ng-model="pagedata.item.titlecolor" type="color" />
											<span class="input-group-addon btn btn-info" ng-click="pagedata.item.namecolor=''">清除</span>
										</div>
										<div class="help-block">颜色</div>
									</div>
								</div>
                                <div ng-if="pagedata.set =='title'" class="form-group">
                                    <label class="col-xs-12 col-sm-3 col-md-2 left-label">大小</label>
                                    <div class="col-xs-12 col-sm-8 col-lg-9">
                                        <div class='input-group'>
                                            <input type="text" ng-model="pagedata.item.titlesize" class="form-control namesize" placeholder="例如: 14,16"  />
                                            <div class='input-group-addon'>px</div>
                                        </div>
										<div class="help-block">只需填数字</div>
                                    </div>
                                </div>
								<div ng-if="pagedata.set =='marketprice'" class="form-group">
									<div class="col-xs-12 col-sm-3 col-md-2 left-label">颜色</div>
									<div class="col-xs-12 col-sm-8 col-lg-9">
										<div class="input-group input-group-sm">
											<input class="form-control input-sm diy-bind color" data-bind-child="style"  ng-model="pagedata.item.marketpricecolor" type="color" />
											<span class="input-group-addon btn btn-info" ng-click="pagedata.item.namecolor=''">清除</span>
										</div>
										<div class="help-block">颜色</div>
									</div>
								</div>
                                <div ng-if="pagedata.set =='marketprice'" class="form-group">
                                    <label class="col-xs-12 col-sm-3 col-md-2 left-label">大小</label>
                                    <div class="col-xs-12 col-sm-8 col-lg-9">
                                        <div class='input-group'>
                                            <input type="text" ng-model="pagedata.item.marketpricesize" class="form-control namesize" placeholder="例如: 14,16"  />
                                            <div class='input-group-addon'>px</div>
                                        </div>
										<div class="help-block">只需填数字</div>
                                    </div>
                                </div>
								<div ng-if="pagedata.set =='productprice'" class="form-group">
									<div class="col-xs-12 col-sm-3 col-md-2 left-label">颜色</div>
									<div class="col-xs-12 col-sm-8 col-lg-9">
										<div class="input-group input-group-sm">
											<input class="form-control input-sm diy-bind color" data-bind-child="style"  ng-model="pagedata.item.productpricecolor" type="color" />
											<span class="input-group-addon btn btn-info" ng-click="pagedata.item.namecolor=''">清除</span>
										</div>
										<div class="help-block">颜色</div>
									</div>
								</div>
                                <div ng-if="pagedata.set =='productprice'" class="form-group">
                                    <label class="col-xs-12 col-sm-3 col-md-2 left-label">大小</label>
                                    <div class="col-xs-12 col-sm-8 col-lg-9">
                                        <div class='input-group'>
                                            <input type="text" ng-model="pagedata.item.productpricesize" class="form-control namesize" placeholder="例如: 14,16"  />
                                            <div class='input-group-addon'>px</div>
                                        </div>
										<div class="help-block">只需填数字</div>
                                    </div>
                                </div>
							<div class="form-group" ng-if="pagedata.set =='img'">
                                <label class="col-xs-12 col-sm-3 col-md-2 left-label">图片设置</label>
									<div class="col-xs-12 col-sm-8 col-lg-9">
										<div class="input-group">
											<input type="text" ng-model="pagedata.item.thumb" class="form-control ng-pristine ng-valid ng-touched" autocomplete="off">
											<span class="input-group-btn" ng-show="false==false">
												<button class="btn btn-primary" type="button" ng-click="image(pagedata.item,'thumb')">选择图片</button>
											</span>
										</div>
										<div class="input-group" style="margin-top:.5em;">
											<img ng-src="{{tomedia(pagedata.item.thumb) || '../core/resource/images/nopic.jpg'}}" class="img-responsive img-thumbnail" width="150" src="../core/resource/images/nopic.jpg">
										</div>
										<div class="help-block">（图片尺寸建议320*320）</div>		
									</div>
                            </div>

                        </div>
                    </div>
                   
                </td>
            </tr>
        </table>
		<div class="modal-sub"><button class="btn btn-primary" onclick="submit()">提交</button></div>
    </div>
	
</div>

<script language='javascript' src="../addons/jy_poster/resource/js/designer.js"></script>
<script language='javascript'>
	scope.pagedata.abc=function(type){
	
	console.log(type);
	scope.pagedata.set=type;
	scope.$applyAsync();
	}
	
</script>	
<script language='javascript'>
	require(['bootstrap'],function(){
             $('#myTab a').click(function (e) {
                 e.preventDefault();
                $('#tab').val( $(this).attr('href'));
                 $(this).tab('show');
             })
     });
     var imgsettimer = 0 ;
   var nametimer = 0;
   var bgtimer = 0 ;
   $(function(){
     
        if(scope.pagedata.item){   
          setTimeout(function(){
			  $('.drag').each(function(){
				bindEvents($(this));
			  });
		  }, 1000);
        } 
       
            $(':radio[name=type]').click(function(){
                var type = $(this).val();
                bindType(type);
            })

        $(':radio[name=resptype]').click(function(){
            var type = $(this).val();
            if(type == 1)
            {
                $(".resptype1").show();
                $(".resptype0").hide();
            }
            else
            {
                $(".resptype0").show();
                $(".resptype1").hide();
            }
        })
        //改变背景
        $('#bgset').find('button:first').click(function(){
            var oldbg = $(':input[name=bg]').val();
            bgtimer = setInterval(function(){
                 var bg = $(':input[name=bg]').val();
                 if(oldbg!=bg){
                 	  bg = getImgUrl(bg);
                       
                      $('#poster .bg').remove();
                      var bgh = $("<img src='" + bg + "' class='bg' />");
                       var first = $('#poster .drag:first');
                        if(first.length>0){
                           bgh.insertBefore(first);  
                        } else{
                           $('#poster').append(bgh);      
                        }
                       
                      oldbg = bg;
                 }
            },10);
        })
           
        $('.btn-com').click(function(){
            
           var imgset = $('#imgset'), nameset = $("#nameset"),qrset = $('#qrset');
           imgset.hide(),nameset.hide(),qrset.hide();
           clearTimers();
      
            if($('#poster img').length<=0){
                //alert('请选择背景图片!');
                //return;
            }
            var type = $(this).data('type');
            var img = "";
            if(type=='qr'){
                img = '<img src="../addons/jy_poster/resource/images/qr.jpg" />';
            }
            else if(type=='head'){
                img = '<img src="../addons/jy_poster/resource/images/head.jpg" />';
            }else if(type=='img' || type=='thumb'){
                img = '<img src="../addons/jy_poster/resource/images/img.jpg" />';
            } else if(type=='nickname'){
                img = '<div class=text>昵称</div>';
            }  else if(type=='title'){
                img = '<div class=text>商品名称</div>';
            } else if(type=='marketprice'){
                img = '<div class=text>商品现价</div>';
            }else if(type=='productprice'){
                img = '<div class=text>商品原价</div>';
            }
            var index = $('#poster .drag').length+1;
            var obj = $('<div class="drag" onclick="scope.pagedata.abc(\''+type+'\')" type="' + type +'" index="' + index +'" style="z-index:' + index+'">' + img+'<div class="rRightDown"> </div><div class="rLeftDown"> </div><div class="rRightUp"> </div><div class="rLeftUp"> </div><div class="rRight"> </div><div class="rLeft"> </div><div class="rUp"> </div><div class="rDown"></div></div>');
            
            $('#poster').append(obj);
            
            bindEvents(obj);
            
        });
    
         $('.drag').click(function(){
               bind($(this))     ;
         })
        
    })
  /*  $('form').submit(function(){
       
      
        var data = [];
        $('.drag').each(function(){
            var obj = $(this);
            var type = obj.attr('type');
            var left = obj.css('left'),top = obj.css('top');
            var d= {left:left,top:top,type:obj.attr('type'),width:obj.css('width'),height:obj.css('height')};
            if(type=='nickname' ||type=='title' || type=='marketprice' || type=='productprice'){
                d.size = obj.attr('size');
                d.color = obj.attr('color');
            } else if(type=='qr'){
                d.size = obj.attr('size');
            } else if(type=='img'){
                d.src = obj.attr('src');
            }
            data.push(d);
        });
        $(':input[name=data]').val( JSON.stringify(data));
        $('form').removeAttr('stop');
        return true;
    });*/

    function bindEvents(obj){
           // var obj=$("#qr");
            var rs = new Resize(obj, { Max: true, mxContainer: "#poster" });
            rs.Set($(".rRightDown",obj), "right-down");
            rs.Set($(".rLeftDown",obj), "left-down");
            rs.Set($(".rRightUp",obj), "right-up");
            rs.Set($(".rLeftUp",obj), "left-up");
            rs.Set($(".rRight",obj), "right");
            rs.Set($(".rLeft",obj), "left");
            rs.Set($(".rUp",obj), "up");
            rs.Set($(".rDown",obj), "down"); 
            rs.Scale = true;
            var type = obj.attr('type');
			if(type=='nickname' || type=='img' || type=='title' || type=='marketprice' || type=='productprice'){
                rs.Scale = false;
            }
            new Drag(obj, { Limit: true, mxContainer: "#poster" });
            $('.drag .remove').unbind('click').click(function(){
                $(this).parent().remove();
            })
			var index = obj.attr('index');
            var cs= $('.drag[index=' + index + ']').attr('index');
			
		require(['jquery.contextMenu'],function(){
			$.contextMenu({
				selector: '.drag[index=' + index + ']',
				callback: function(key, options) {
					
					var index = parseInt($(this).attr('zindex'));
					if(key=='next'){
						var nextdiv = $(this).next('.drag');
						if(nextdiv.length>0 ){
						   nextdiv.insertBefore($(this));  
						}
					} else if(key=='prev'){
						var prevdiv = $(this).prev('.drag');
						if(prevdiv.length>0 ){
						   $(this).insertBefore(prevdiv);  
						} 
					} else if(key=='last'){
						var len = $('.drag').length;
						 if(index >=len-1){
							return;
						} 
						var last = $('#postera .drag:last');
						if(last.length>0){
						   $(this).insertAfter(last);  
						}
					}else if(key=='first'){
						var index = $(this).index();
						if(index<=1){
							return;
						}
						var first = $('#postera .drag:first');
						if(first.length>0){
						   $(this).insertBefore(first);  
						}
					}else if(key=='delete'){
					   $(this).remove();
					}
					var n =1 ;
					$('.drag').each(function(){
						$(this).css("z-index",n);
						n++; 
						})
				},
				items: {
						"next": {name: "调整到上层"},
						"prev": {name: "调整到下层"},
						"last": {name: "调整到最顶层"},
						"first": {name: "调整到最低层"},
						"delete": {name: "删除元素"}
				}
			});
			obj.unbind('click').click(function(){
				bind($(this));
			})
				
		});
	}
			
function submit(){			
			

		var data = {};
		var da = [];
        $('.drag').each(function(){
            var obj = $(this);
            var type = obj.attr('type');
            var left = obj.css('left'),top = obj.css('top');
			
            var d= {left:left,top:top,type:obj.attr('type'),width:obj.css('width'),height:obj.css('height')};
            if(type=='nickname' ){  
                d.size = scope.pagedata.item.namesize+'px';
                d.color = scope.pagedata.item.namecolor;
            } else if(type=='qr'){
                d.size = obj.attr('size');
            } else if(type=='img'){
                d.src = obj.attr('src');
            }else if(type=='title' ){  
                d.size = scope.pagedata.item.titlesize+'px';
                d.color = scope.pagedata.item.titlecolor;
            }
			else if(type=='marketprice' ){  
                d.size = scope.pagedata.item.marketpricesize+'px';
                d.color = scope.pagedata.item.marketpricecolor;
            }
			else if(type=='productprice' ){  
                d.size = scope.pagedata.item.productpricesize+'px';
                d.color = scope.pagedata.item.productpricecolor;
            }
            da.push(d);
        });	
			var c= {data:da,image:scope.pagedata.item.image,id:scope.pagedata.item.id};     
			
            data.data = c;
			data.op = 'design';
			
			scope.post_json(data);
	}
	
function bindType(type){alert('123');	
             $("#goodsparams").hide();
             $(".type4").hide();
             if(type=='4'){
                 $(".type4").show();    
             } else if(type=='3'){
                    $("#goodsparams").show();
             }
}
function clearTimers(){
           clearInterval(imgsettimer);
           clearInterval(nametimer);
           clearInterval(bgtimer);
           
}
        
function bind(obj){
			
            var imgset = $('#imgset'), nameset = $("#nameset"),qrset = $('#qrset');
             imgset.hide(),nameset.hide(),qrset.hide();
             clearTimers();
               var type = obj.attr('type');
               if(type=='nickname' || type=='title' || type=='marketprice' || type=='productprice'){
       
                  nameset.show();
                  var color = obj.attr('color') || "#000";
                  var size = obj.attr('size') || "16";
                  var input = nameset.find('input:first');
                  var namesize = nameset.find('#namesize');
                  var picker = nameset.find('.sp-preview-inner');
                  input.val(color); namesize.val(size.replace("px",""));  
                  picker.css( {'background-color':color,'font-size':size});
                      
                  nametimer = setInterval(function(){
                       obj.attr('color',input.val()).find('.text').css('color',input.val());
                       obj.attr('size',namesize.val() +"px").find('.text').css('font-size',namesize.val() +"px");
                   },10);
                   
             } else if(type=='qr'){
                 qrset.show();
                 var size = obj.attr('size') || "3";
                 var sel = qrset.find('#qrsize');
                 sel.val(size);
                 sel.unbind('change').change(function(){
                      obj.attr('size',sel.val()) 
                 });
             }  
}
    </script>